import React, { Component } from "react";
import "./index.less";
import { Slider, Icon } from "antd";
import WaveSurfer from "wavesurfer.js";

//pcm转成json格式 length 默认值1024
// exportPCM(length, accuracy, noWindow, start)


export default class Audio extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      flag: false,
      currentTime: 0,
      durationTime: 0,
      currentTime: 0, //当前播放位置时间(s),
      sorceflag: false, //是否显示调节音量
      marks: {},
      
    };
  }

  componentDidMount() {
    this.createWaveSurfer(); //初始化音频
  }

  //创建实例对象
  createWaveSurfer = () => {
    const wavesurfer = WaveSurfer.create({
      container: "#waveform",//波形id
      audioRate: 1, //播放速度
      backend: "MediaElement",
      pixelRatio:1,//更快的加载
      waveColor: '#A8DBA8',//波形颜色
      progressColor: '#3B8686',//已播放波形颜色
      barHeight:1.5, //波形高度
      height:60,//图像整体高度
      barWidth:3,//每一条波形宽度
      cursorWidth:2,//指针宽度
      cursorColor:'#1890ff',//指针颜色
      // cursorColor:'red',
      // skipLength:10
    });
    this.setState(
      {
        wavesurfer
      },
      () => {
        console.log("wavesurfer", wavesurfer);
      }
    );
    wavesurfer.load(require("./../../video/1.mp3"));

    //监听加载中
    wavesurfer.on("loading", percents => {
      console.log("加载进度", percents);
    });

    //监听加载成功
    wavesurfer.on("ready", () => {
      console.log("加载成功");
      const getDuration = this.state.wavesurfer.getDuration(); //音频总时间
      console.log("音频总长度", getDuration);
      this.setState({
        durationTime: getDuration
      });
      this.bugtime(); //调用获取质检问题的时间戳
    });

    //监听播放中音频
    wavesurfer.on("audioprocess", () => {
      const currentTime = wavesurfer.getCurrentTime(); //当前播放时间
      console.log("播放进行中", currentTime);
      //进度条位置
      const scrollplace = (currentTime / this.state.durationTime) * 100;
      this.setState({
        currentTime, //当前播放时间,用于计算
        scrollplace //进度条位置
      });
    });

    // 监听波形被点击时
    wavesurfer.on("seek", seek => {
      console.log("点击", seek);
      let _seek = seek * 100;
      this.setState({
        scrollplace: _seek //点击波形的位置
      });
    });

    // 结束播放
    wavesurfer.on("finish", () => {
      wavesurfer.pause();
      console.log("播放结束");
    });
  };

  //点击暂停/开始 控制播放器
  handleButton = () => {
    const audio = document.getElementsByTagName("audio")[0];
    if (audio.paused) {
      audio.play();
      this.setState({
        flag: true
      });
    } else {
      audio.pause();
      this.setState({
        flag: false
      });
    }
  };

  //转换音频时长显示
  transTime = time => {
    let duration = parseInt(time);
    let minute = parseInt(duration / 60);
    let sec = (duration % 60) + "";
    let isM0 = ":";
    if (minute == 0) {
      minute = "00";
    } else if (minute < 10) {
      minute = "0" + minute;
    }
    if (sec.length == 1) {
      sec = "0" + sec;
    }
    return minute + isM0 + sec;
  };

  //获取质检问题位置
  bugtime = () => {
    const durationTime = this.state.durationTime;
    const msg = {
      style: {
        color: "#f50"
      },
      label: <strong>警告</strong>
    };
    //假设质检警告有3条
    const arr = [34, 88, 140];
    const _marks = this.state.marks;
    arr.forEach(item => {
      let temp = (item / durationTime) * 100;
      _marks[temp] = msg;
    });
    console.log(_marks);
    this.setState({
      marks: _marks
    });
  };

  //移动antd控制条
  onChange = value => {
    //当前播放器时间 = 当前位置/100 *总时间
    const handleTime = (value / 100) * this.state.durationTime;
    console.log("handleTime", handleTime);
    //进度条位置
    const scrollplace = (handleTime / this.state.durationTime) * 100;
    this.setState({
      currentTime: handleTime, //当前播放的时间
      scrollplace //位置的时间
    });
    //设置波形图的位置
    this.state.wavesurfer.seekTo(value / 100);
  };

  //wave开始/暂停
  wavePlay = () => {
    this.state.wavesurfer.playPause();
    let _flag = this.state.flag;
    this.setState({
      flag: !_flag
    });
  };

  //waveReset 重置
  waveReset = () => {
    this.state.wavesurfer.stop();
    this.setState({
      flag: false
    });
  };

  //audioRate 5倍速播放
  audioRate5 = () => {
    this.state.wavesurfer.setPlaybackRate(5);
    console.log("当前播放速度5倍");
    //播放并设置flag
    this.state.wavesurfer.play();
    this.setState({
      flag: true
    });
  };

  //audioRate 正常1速度播放
  audioRate1 = () => {
    this.state.wavesurfer.setPlaybackRate(1);
    console.log("当前播放速度5倍");
    //播放并设置flag
    this.state.wavesurfer.play();
    let _flag = this.state.flag;
    this.setState({
      flag: true
    });
  };

  //音量控制
  notification = (value) => {
    this.state.wavesurfer.setVolume(value / 100);
    console.log(value);
  };

  //显示隐藏音量
  handlesorce = (e) => {
    const _sorceflag = this.state.sorceflag;
    this.setState({
      sorceflag: !_sorceflag
    });
  };

  render() {
    return (
      <div className="video-containter">
        <div className="video-box">
          {/* 播放器波形图 */}
          <div id="waveform" />

          {/* 播放器进度条 */}
          <div className="timelinebox">
            <Slider
              defaultValue={0}
              value={this.state.scrollplace}
              onChange={this.onChange}
              tipFormatter={null} //滑动数字
              step={0.1} //步长
              marks={this.state.marks}
            />
            <div className="sliderLeft">
              {this.transTime(this.state.currentTime)}
            </div>
            <div className="sliderRight">
              {this.transTime(this.state.durationTime)}
            </div>
          </div>

          {/* 播放器控制条 */}
          <div
            style={{ marginTop: 35, padding: "5px 10px" }}
            className="btnBox"
          >
            <div onClick={this.wavePlay} className="btn">
              {this.state.flag === true ? (
                <Icon type="pause-circle" />
              ) : (
                <Icon type="right-circle" />
              )}
            </div>
            <div onClick={this.waveReset} className="btn">
              <Icon type="retweet" />
            </div>
            <div style={{ float: "right" }}>
              <div
                onClick={this.audioRate1}
                className="btn"
                style={{ fontSize: 20 }}
              >
                X1
              </div>
              <div
                onClick={this.audioRate5}
                className="btn"
                style={{ fontSize: 20 }}
              >
                X5
              </div>
              <div
                onClick={this.handlesorce}
                className="btn sorce"
                style={{ fontSize: 20 }}
              >
                <Icon type="notification" />
                {this.state.sorceflag === true ? (
                  <Slider
                    vertical
                    defaultValue={100}
                    style={{ height: 30 }}
                    className="notification"
                    onChange={this.notification}
                  />
                ) : (
                  ""
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
